<style type="text/css">
	@media only screen and (max-width: 479px) and (min-width: 320px) {
		.s_selected_time {
			width: 108px !important;
		}
	}
</style>
<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['项目管理', '项目导航']" icon="fa fa-smile-o" class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
		</sa-big-breadcrumbs>
	</div>

	<sa-widgets-grid>
		<div class="s_table">
			<div sa-widget [editbutton]="false" color="darken" class="clearfix">
				<header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2>项目导航</h2>
				</header>
				<div>
					<div class="widget-body no-padding">
						<div class="page-header clearfix s_table_opreation">
							<div class="left page-header-btn">
								<!-- <sa-company-tree-car companyTreeId="companyTree" wrapId="content" [isShowCarSort]="false" [isShowCarNum]="true" (companySelected)="companySelected($event)"></sa-company-tree-car> -->
								<div class="top_module top_module_box" style="min-width: auto;">
									<span class="top_module_label module_text">项目分类</span>
									<select name="" class="top_module_select" [(ngModel)]="table.projectType"
										style="min-width: 110px;">
										<option value="">全部</option>
										<option value="1">GPS流向管控平台</option>
										<option value="2">流向管控平台</option>
										<option value="3">汉德管理平台</option>
										<option value="4">第三方平台</option>
									</select>
								</div>
								<div class="top_module top_module_box" style="min-width: auto;">
									<span class="top_module_label module_text">类别</span>
									<select name="" class="top_module_select" [(ngModel)]="table.type"
										style="min-width: 110px;">
										<option value="">全部</option>
										<option value="1">通用</option>
										<option value="2">定制化</option>
										<option value="0">其他</option>
									</select>
								</div>
								<button class="btn btn-primary" (click)="table_search()">查询</button>
								<button class="btn btn-primary" (click)="add_nav(ProjectNavModal)">新增</button>
							</div>
							<div class="right top-search">
								<input type="text" [(ngModel)]="table.searchKey" (change)="table_search()"
									class="search-input" placeholder="地址/负责人/描述">
								<span class="top-search-box">
									<button class="top-search-btn" type="button" (click)="table_search()"> <i
											class="fa fa-search"></i></button>
								</span>
							</div>
						</div>
						<div class="table_scroll">
							<table
								class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
								<thead>
									<tr>
										<th>项目类别</th>
										<th>项目名称</th>
										<th>类别</th>
										<th>地址</th>
										<th>账号</th>
										<th>密码</th>
										<th>负责人</th>
										<th>描述</th>
										<th>修改时间</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr *ngFor="let row of tableData" [ngClass]='{selected: row.isChecked }'
										(dblclick)='checkAbnormal(row)'>
										<td>{{projectType[row.projectType]}}</td>
										<td>{{row.navigationName}}</td>
										<td>{{type[row.type]}}</td>
										<td>{{row.address}}</td>
										<td>
											{{row.userName}}
										</td>
										<td>
											{{row.password}}
										</td>
										<td>{{row.linkMan}}</td>
										<td>{{row.description}}</td>
										<td>{{row.updateTime}}</td>
										<td>
											<button type="button" (click)="editRow(row,ProjectNavModal)">编辑</button>
											<button type="button" (click)="deleteRow(row)">删除</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="table-fix clearfix">
							<paginator [totalRecords]="totalCount" [rows]="pageSize" [currentPage]="curPage - 1"
								(onPageChange)="paginate($event)">
							</paginator>
							<button type="button" class="btn default refresh_btn" (click)="refresh()"><i
									class="fa fa-refresh"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!--    弹窗-->
		<section bsModal #ProjectNavModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myLargeModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" (click)="modalClose(ProjectNavModal)"
							aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">新增项目导航</h4>
					</div>
					<form class="form-horizontal" role="form" novalidate="novalidate">
						<div class="modal-body">
							<div class="row form-horizontal">
								<div class="form-group col-xs-12" id="controlTreeCompany">
									<label class="control-label col-xs-2">项目分类<sup>*</sup></label>
									<div class="col-xs-10">
										<select name="platform" class="top_module_select" [(ngModel)]="projectFrom.projectType"
											style="min-width: 110px;">
											<option value="1">GPS流向管控平台</option>
											<option value="2">流向管控平台</option>
											<option value="3">汉德管理平台</option>
											<option value="4">第三方平台</option>
										</select>
									</div>
								</div>
								<div class="form-group col-xs-12 s_fix_select2">
									<label class="control-label col-xs-2" for="newPassword">类别<sup>*</sup></label>
									<div class="col-xs-10 s_fix_select2_width s_fix_select2 ">
										<select name="type" class="top_module_select" [(ngModel)]="projectFrom.type"
											style="min-width: 110px;">
											<option value="1">通用</option>
											<option value="2">定制</option>
											<option value="0">其他</option>
										</select>
									</div>
								</div>
								<div class="form-group col-xs-12">
									<label class="col-xs-2 control-label">项目名称<sup>*</sup></label>
									<div class="col-xs-10 insert_text">
										<input class="form-control" [(ngModel)]='projectFrom.navigationName'
											name='navigationName' />
									</div>
								</div>
								<div class="form-group col-xs-12">
									<label class="col-xs-2 control-label">项目地址<sup>*</sup></label>
									<div class="col-xs-10 insert_text">
										<input class="form-control" [(ngModel)]='projectFrom.address'
											name='address' />
									</div>
								</div>
								<div class="form-group col-xs-12">
									<label class="col-xs-2 control-label">账号<sup>*</sup></label>
									<div class="col-xs-10 insert_text">
										<input class="form-control" [(ngModel)]='projectFrom.userName'
											name='userName' />
									</div>
								</div>
								<div class="form-group col-xs-12">
									<label class="col-xs-2 control-label">密码<sup>*</sup></label>
									<div class="col-xs-10 insert_text">
										<input class="form-control" [(ngModel)]='projectFrom.password'
											name='password' />
									</div>
								</div>
								<div class="form-group col-xs-12">
									<label class="col-xs-2 control-label">负责人</label>
									<div class="col-xs-10 insert_text">
										<input class="form-control" [(ngModel)]='projectFrom.linkMan'
											name='linkMan' />
									</div>
								</div>
								<div class="form-group col-xs-12">
									<label class="col-xs-2 control-label">描述</label>
									<div class="col-xs-10 insert_text">
										<input class="form-control" [(ngModel)]='projectFrom.description'
											name='description' />
									</div>
								</div>
								<div class="form-group col-xs-12">
									<label class="col-xs-2 control-label">排序</label>
									<div class="col-xs-10 insert_text">
										<input class="form-control" [(ngModel)]='projectFrom.sort'
											name='sort' />
									</div>
								</div>
								
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								(click)="modalClose(ProjectNavModal)">取消</button>
							<button type="button" class="btn btn-primary"
								(click)="apiControlSubmit(ProjectNavModal)">确认</button>
						</div>
					</form>
				</div>
			</div>
		</section>
		<!--  弹窗end-->


		<!-- 传感器详细问题 -->
		<!-- <div bsModal #problemModal="bs-modal" id="problemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg" style="width: 800px;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" (click)="cancelProblemModal(problemModal)"
								aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">{{problemName}}详细问题</h4>
						</div>
						<div class="modal-body" style="padding: 15px 15px 30px 15px">
							<div class="table_scroll">
								<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
									<thead>
										<tr>
											<th>问题描述</th>
											<th>开始时间</th>
											<th>结束时间</th>
											<th>操作人</th>
											<th>操作时间</th>
										</tr>
									</thead>
									<tbody>
	
										<tr *ngFor="let row of ProblemModalTableData" >
											<td>
												<span *ngIf="problemName == '传感器'">
													{{row.sensorProblem}}
												</span>
												<span *ngIf="problemName == 'GPS'">
													{{row.gpsProblem}}
												</span>
											</td>
											<td>{{row.startTime}}</td>
											<td>{{row.endTime}}</td>
											<td>{{row.operator}}</td>
											<td>{{row.operatingTime}}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div> -->
		<!-- 传感器详细问题 end-->
	</sa-widgets-grid>

</div>
<style>
	.abnormalDevice {
		padding: 10px 0 0 30px;
		position: relative;
		height: 46px;
	}

	.abnormalDeviceList {
		display: inline-block;
		border-left: 1px solid #ddd;
		border-top: 1px solid #ddd;
		padding: 8px 10px;
		cursor: pointer;
		position: relative;
		z-index: 20;
	}

	.abnormalDeviceList:first-child {
		border-top-left-radius: 5px;
	}

	.abnormalDeviceList:last-child {
		border-top-right-radius: 5px;
		border-right: 1px solid #ddd;
	}

	.top_module .deviceProblem {
		background: none;
		font-weight: normal;
	}

	.top_module .isActive {
		color: rgba(26, 109, 221, 1);
		border-bottom: 2px solid #fff;
	}
</style>